<div id="cdr-body">
    <div v-if="show_score">总评分：[[score]]，a评分：[[a_score]]，b评分：[[b_score]]</div>
    <div :is="item.component" :text="item.text" :text2="item.text2" v-for="item in items"></div>
</div>
<style>
    #cdr-body .layim-chat-mine{
        margin-left: 0;
        text-align: left;
        background-color: #5FB878;
        color: #fff;
        min-height:10px;
    }
    #cdr-body .layim-chat-mine:after {
        left: auto;
        right: -10px;
        border-top-color: #5FB878;
    }
    #cdr-body  .layim-chat-user {
        position: absolute;
        left: 3px;
        padding-top:5px;
    }
    #cdr-body .layim-chat-user img {
        width: 40px;
        height: 40px;
        border-radius: 100%;
    }
    #cdr-body .layim-chat-text {
        margin-top: 10px;
    }
    .layim-chat-text{
        min-height: 19px;
    }
    #cdr-body{
        margin: 20px;
    }
    #cdr-body div{
        /*width: 70%;*/
    }
    .nav-title{
        display: none;
    }
</style>
<script src="/static/layui/layui.js"></script>
<!--owl carousel-->
<script src="/static/js/owl.carousel.js"></script>
<script src="/static/js/vue.min.js"></script>
<script>
    var AComponent = Vue.extend({
        props: ['text'],
        template: '<div style="padding-left:40px"><div class="layim-chat-user"><img src="/static/img/logo.jpg"></div>' +
        '<div class="layim-chat-text">[[text]]</div>' +
        '</div>',
        delimiters: ['[[', ']]']
    })
    var BComponent = Vue.extend({
        props: ['text'],
        template: '<div style="text-align: right;padding-right:40px">' +
        '<div class="layim-chat-mine layim-chat-text">[[text]]</div>' +
        '<div class="layim-chat-user" style="right: 4px;"><img src="/static/img/userface.jpg"></div></div>',
        delimiters: ['[[', ']]']
    })
    var AComponentR = Vue.extend({
        props: ['text','text2'],
        template: '<div style="padding-left:40px"><div class="layim-chat-user"><img src="/static/img/logo.jpg"></div>' +
        '<div class="layim-chat-text"  style="color: red">[[text]]<br>[[text2]]</div>' +
        '</div>',
        delimiters: ['[[', ']]']
    })
    var BComponentR = Vue.extend({
        props: ['text','text2'],
        template: '<div style="text-align: right;padding-right:40px">' +
        '<div class="layim-chat-mine layim-chat-text" style="color: red">[[text]]<br>[[text2]]</div>' +
        '<div class="layim-chat-user" style="right: 4px;"><img src="/static/img/userface.jpg"></div></div>',
        delimiters: ['[[', ']]']
    })
    var AComponentB = Vue.extend({
        props: ['text','text2'],
        template: '<div style="padding-left:40px"><div class="layim-chat-user"><img src="/static/img/logo.jpg"></div>' +
        '<div class="layim-chat-text"  style="color: blue">[[text]]<br>[[text2]]</div>' +
        '</div>',
        delimiters: ['[[', ']]']
    })
    var BComponentB = Vue.extend({
        props: ['text','text2'],
        template: '<div style="text-align: right;padding-right:40px">' +
        '<div class="layim-chat-mine layim-chat-text" style="color: blue">[[text]]<br>[[text2]]</div>' +
        '<div class="layim-chat-user" style="right: 4px;"><img src="/static/img/userface.jpg"></div></div>',
        delimiters: ['[[', ']]']
    })
    var AComponentG = Vue.extend({
        props: ['text','text2'],
        template: '<div style="padding-left:40px"><div class="layim-chat-user"><img src="/static/img/logo.jpg"></div>' +
        '<div class="layim-chat-text"  style="color: green">[[text]]<br>[[text2]]</div>' +
        '</div>',
        delimiters: ['[[', ']]']
    })
    var BComponentG = Vue.extend({
        props: ['text','text2'],
        template: '<div style="text-align: right;padding-right:40px">' +
        '<div class="layim-chat-mine layim-chat-text" style="color: green">[[text]]<br>[[text2]]</div>' +
        '<div class="layim-chat-user" style="right: 4px;"><img src="/static/img/userface.jpg"></div></div>',
        delimiters: ['[[', ']]']
    })
    var vue = new Vue({
        el: '#cdr-body',
        components: {
            'a-component': AComponent,
            'b-component': BComponent,
            'a-componentR': AComponentR,
            'b-componentR': BComponentR,
            'a-componentB': AComponentB,
            'b-componentB': BComponentB,
            'a-componentG': AComponentG,
            'b-componentG': BComponentG
        },
        data: {
            items: [],
            show_score:false,
            a_score:0,
            b_score:0,
            score:0
        },
        delimiters: ['[[', ']]']
    });

    layui.use('layim', function(layim) {
        var $ = layui.jquery;
        var ii = 0;
        var data;
        var sep = false;
        //配置 首页一些信息
        var callid = {{.callid}}
                console.log()
        var weixian = {{.weixian}}
                console.log()
        var youliang = {{.youliang}}
                console.log()
        var success = {{.success}}
                console.log()
        // if  (callid=="")
        $.post('{{urlfor "CdrController.ContentTableAllList"}}', {'call_id': callid,'off_line':'{{.off_line}}'}, function (out) {
            console.log(out.data)
            data = out.data
            if (callid=="excel"){
                data = out.data.data
                vue.show_score = true
                vue.a_score = out.data.a_score;
                vue.b_score = out.data.b_score;
                vue.score = out.data.score;
            }
            if(data.length!=0) {
                if (data[0]["ai_speak"] == "-1"){
                    vue.items.push({
                        'component': isWeixinaB(data[0]["people_speak"]),
                        'text': data[0]["people_speak"],
                        'text2': '禁忌:'+data[0]["fail"]+'常规:'+data[0]["fine"]
                    })

                }else {
                    vue.items.push({
                        'component': isWeixinaB(data[0]["ai_speak"]),
                        'text': data[0]["ai_speak"],
                        'text2': '禁忌:'+data[0]["fail"]+'常规:'+data[0]["fine"]
                    })
                }
                addDiv(ii + 1, sep)
                return
            }else {
                initDiv()
            }
        }, "json");
        function initDiv() {
            setTimeout(function () {
                $.post('{{urlfor "CdrController.ContentTableAllList"}}', {'call_id': callid}, function (out) {
                    console.log(out.data)
                    data = out.data
                    if(data.length!=0) {
                        var isweixian = false
                        if (data[0]["ai_speak"] == "-1"){
                            vue.items.push({
                                'component': isWeixinaA(data[0]["people_speak"]),
                                'text': data[0]["people_speak"],
                                'text2': '禁忌:'+data[0]["fail"]+'常规:'+data[0]["fine"]
                            })
                        }else {
                            vue.items.push({
                                'component': isWeixinaA(data[0]["ai_speak"]),
                                'text': data[0]["ai_speak"],
                                'text2': '禁忌:'+data[0]["fail"]+'常规:'+data[0]["fine"]
                            })
                        }
                        addDiv(ii + 1, sep)
                        return
                    }else {
                        initDiv()
                    }
                }, "json");
            },3000);
        }
            function addDiv(i,sep) {
            if (sep){
                addDiv(i, false)
            }else {
                // console.log(i)
                // console.log("lenst", data.length)
                if (i<data.length){
                    if (data[i]["ai_speak"] == "-1") {
                            vue.items.splice(0,0,{
                                'component': isWeixinaB(data[i]["people_speak"]),
                                'text': data[i]["people_speak"],
                                'text2': '禁忌:'+data[i]["fail"]+'常规:'+data[i]["fine"]
                            })
                            i++;
                            addDiv(i);
                    }else if(data[i]["people_speak"] == "-1"){
                            vue.items.splice(0,0,{
                                'component': isWeixinaA(data[i]["ai_speak"]),
                                'text': data[i]["ai_speak"],
                                'text2': '禁忌:'+data[i]["fail"]+'常规:'+data[i]["fine"]
                            })
                            i++;
                            addDiv(i);
                    }
                }else {
                    setTimeout(function () {
                        $.post('{{urlfor "CdrController.ContentTableOne"}}', {'call_id':callid,"id":data[data.length-1]["id"],'off_line':'{{.off_line}}','off_line1':'{{.off_line1}}'}, function (out) {
                            if (out.status==-1){}else if (out.count > 0){
                                data.push(out.data[0])
                                console.log(data)
                                addDiv(i,false)
                            }else {
                                addDiv(i,true)
                            }
                        }, "json");
                    }, 1000);
                }
            }
        }
        function isWeixinaA(datas){
            var isweixian = false
            var isliuliang = false
            var isSuccess = false
            for (v in weixian){
                if (datas.indexOf(weixian[v])!=-1){
                    isweixian = true
                    break
                }
            }
            for (v in youliang){
                if (datas.indexOf(youliang[v])!=-1){
                    isliuliang = true
                    break
                }
            }
            for (v in success){
                if (datas.indexOf(success[v])!=-1){
                    isSuccess = true
                    break
                }
            }
            if (isweixian){
                return "a-componentR"
            }else if (isliuliang){
                return "a-componentB"
            }else if (isSuccess){
                return "a-componentG"
            }else {
                return "a-component"
            }
        }
        function isWeixinaB(datas){
            var isweixian = false
            var isliuliang = false
            var isSuccess = false
            for (v in weixian){
                if (datas.indexOf(weixian[v])!=-1){
                    isweixian = true
                    break
                }
            }
            for (v in youliang){
                if (datas.indexOf(youliang[v])!=-1){
                    isliuliang = true
                    break
                }
            }
            for (v in success){
                if (datas.indexOf(success[v])!=-1){
                    isSuccess = true
                    break
                }
            }
            if (isweixian){
                return "b-componentR"
            }else if (isliuliang){
                return "b-componentB"
            }else if (isSuccess){
                return "b-componentG"
            }else {
                return "b-component"
            }
        }
    });
</script>
